<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>
    <style>
        .errorlist {
            color: red;
            list-style: none;
            padding: 0;
            margin: 5px 0 15px 0;
        }

        .form-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        input, textarea, select {
            width: 300px;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        input[type="submit"] {
            width: auto;
            padding: 8px 15px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }

        input[type="submit"]:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
<h1>{{ title }}</h1>

<form method="post">
    {% csrf_token %}

    <!-- 显示非字段错误 -->
    {% if form.non_field_errors %}
        <div class="errorlist">
            {% for error in form.non_field_errors %}
                <p>{{ error }}</p>
            {% endfor %}
        </div>
    {% endif %}

    <!-- 显示每个字段及其错误 -->
    {% for field in form %}
        <div class="form-group">
            {{ field.label_tag }}
            {{ field }}

            {% if field.errors %}
                <ul class="errorlist">
                    {% for error in field.errors %}
                        <li>{{ error }}</li>
                    {% endfor %}
                </ul>
            {% endif %}

            {% if field.help_text %}
                <small style="color: #666;">{{ field.help_text }}</small>
            {% endif %}
        </div>
    {% endfor %}

    <input type="submit" value="保存">
    <a href="{% url 'book-list' %}" style="margin-left: 10px;">取消</a>
</form>
</body>
</html>